<!--
 * @Author: shaohang-shy
 * @Date: 2021-02-28 12:49:38
 * @LastEditors: shaohang-shy
 * @LastEditTime: 2021-02-28 12:52:57
 * @Description: demo03-2 函数式组件
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      function Welcome(props) {
        function handleClick() {
          alert(`点击了${props.name}`);
        }
        return <h1 onClick={handleClick}>Hello, {props.name}</h1>;
      }

      ReactDOM.render(
        <div>
          <Welcome name="xiaohong" />
          <Welcome name="xiaobai" />
        </div>,
        document.getElementById("example")
      );
    </script>
  </body>
</html>
